<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单向数据流-2</title>
	<style type="text/css">
		span{color:green;font-weight:bold;font-size: 30px;}
	</style>
</head>
<body>
	<div id="app">
		<span>{{count}}</span>
		<my-component :count="count" v-on:recieve="recieve"></my-component>
	</div>
</body>
</html>
<script src="../../2.1.8/vue.js"></script>
<script>
	/*
		改变父组件中的数据，通过 自定义事件 
	*/
	// 全局组件
	Vue.component('my-component',{
		props : ['count'],
		data(){
			return {
				increaseCount : this.count 
			}
		},
		template : 
			`<div>
				<button v-on:click="changeCout">button</button>
				<h2>我是自定义组件<span> {{increaseCount}}</span></h2>
			</div>`,
		methods : {
			changeCout(){
				this.$emit( 'recieve', ++this.increaseCount );
			}

		}
	});
	var vm = new Vue({
			el : '#app',
			data : {
				count : 0
			},
			methods : {
				recieve : function(count){
					this.count = count ;
				}
			}
		});
</script>